$(function () {
	var app = new Vue({
		el:'#app',
		data:{
			table:{},
			form:{},
			queryData:{},
			addData:{},
			groupAddIndex:'',
			saveUrl:'',
			groupAddId:''
		},
		methods: {
			init:function () {
				var vm = this;
				layui.use(['table','form','layer'], function(){
					  var table = layui.table;
					  var form = layui.form;
					  vm.table = table;
					  vm.form = form;
					  //第一个实例
					  //定义表格
					  table.render({
						 id:"groupInfoDatagrid"
					    ,elem: '#datagrid'
					    ,height: 355
					    ,url: staticURL+'/basic/groupInfoAction/datagrid.do' //数据接口
					    ,page: true //开启分页
					    ,cols: [[ //表头
					      {type:'checkbox'}
					      ,{field: 'id', title: 'ID',width:50,}
					      ,{field: 'name', title: '组名',width:100,}
					      ,{field: 'description', title: '组描述',width:150, }
					      ,{field: 'ops',title: '操作', toolbar: '#toolbar',width:350,}
					    ]]
					    ,response:{
				   		  msgName: 'msg' //状态信息的字段名称，默认：msg
				   		  ,countName: 'total' //数据总数的字段名称，默认：count
				   		  ,dataName: 'rows' //数据列表的字段名称，默认：data
				   		} 
					    ,request: {
						  pageName: 'page' //页码的参数名称，默认：page
						  ,limitName: 'rows' //每页数据量的参数名，默认：limit
						}  
					  });
					  //监听工具条
					  table.on('tool(datagrid)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					    var data = obj.data; //获得当前行数据
					    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					    var tr = obj.tr; //获得当前行 tr 的DOM对象
					    
					    if(layEvent === 'updateGroupUser'){
					      app.openUrl(staticURL+'/basic/userGroupAction/goUserGroup?groupId='+data.id);
					    } else if(layEvent === 'updateGroupRole'){
					      app.openUrl(staticURL+'/basic/roleGroupAction/goRoleGroup?groupId='+data.id);
					    } else if(layEvent === 'editGroup'){
					      app.saveUrl=staticURL+"/basic/groupInfoAction/edit";
					      app.opendGroupAddDialog();
					      sy.formLoadData($("#groupAddFrom"),data,app.addData);
					    } 
					  });
					  //监听提交
					  form.on('submit(groupInfoAddForm)', function(data){
						  app.saveItem(data.field);
						  layer.close(app.groupAddIndex);
					      return false;
					  });
					  
					});
			},
			query:function () {
				this.table.reload('groupInfoDatagrid', {
					  where: this.queryData
				});
			},
			addItem:function(){
				app.saveUrl=staticURL+"/basic/groupInfoAction/add"
				this.opendGroupAddDialog();
			},
			deleteItem:function(){
				var rows = this.table.checkStatus('groupInfoDatagrid').data;
				var ids = "";
				if (rows.length == 1) {
					layer.confirm('您要删除当前所选项目？', {
						  btn: ['确定','取消'] //按钮
						}, function(){
							$.ajax({
								url : staticURL+'/basic/groupInfoAction/delete?id='+rows[0].id,
								dataType : 'json',
								success : function(response) {
									app.query();
									layer.msg('删除成功！', {icon: 6});
								}
							});
						}, function(){
					  	}
					  );
				} else {
					layer.alert('请选择【一项】要删除的记录！', {icon: 8});
				}
			},
			opendGroupAddDialog:function(){
				app.groupAddIndex= layer.open({
					  type: 1, 
					  title:"增加组",
					  area: ['420px', '240px'],
					  icon:0,
					  content: $("#groupAddDiv").html(),
					  end:function(){
					  }
					});
			},
			saveItem:function(data){
				$.ajax({
					url : app.saveUrl,
					data : data,
					dataType : 'json',
					success : function(r) {
						if (r.success) {
							layer.msg( r.msg);
							app.query();
						} else {
							layer.msg( r.msg);
						}
					}
				});
			},
			openUrl:function(url){
				layer.open({
					  type: 2, 
					  title:false,
					  area:['100%','100%'],
					  offset:["0px","0px"],
					  icon:0,
					  closeBtn: 0,
					  content: url,
					  end:function(){
					  }
					}); 
			}
		},
		created: function () {
			this.init();
			window._refresh = this.query;
		},
		updated:function(){
		}
	});
});